<!-- 页面 -->
<template>
  <div>
    <el-table :data="mergedList" border style="width: 100%" class="center-table">
      <el-table-column prop="name" label="名称" align="center">
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center" >
        <template #default="scope">
          <span class="ellipsis" :title="scope.row.isManager">
            <span v-if="scope.row.type== 'pro' ">普通用户</span>
            <span v-else>管理员</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template #default="scope">
          <el-button
            v-if="isAdmin" 
            size="mini"
            @click="openEditDialog(scope.row, scope.$index)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹出层 -->
    <el-dialog :visible.sync="editDialogVisible" title="编辑信息" width="600px">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="用户名称">
          <el-input v-model="editForm.userName" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="角色类型">
          <el-select v-model="editForm.roleType" placeholder="请选择角色类型">
            <el-option
              v-for="option in roleTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<!--vue -->
<script>
import {
  getTargetList,
  userRoleTargetList,
  usergetToolList,
  userRoleupdategetList,
  RoleupdategetList
} from "@/api/manage/index.js"; // 引入接口方法
import { mapGetters } from "vuex";

export default {
  //存放数据
  data() {
    return {
      //声明的属性
      userList: [], // 用户列表
      sysRole: [], // 角色列表
      mergedList: [], // 合并后的列表
      editDialogVisible: false, // 控制编辑弹出层显示
      editForm: {
        userName: "", // 用户名称
        roleType: "", // 角色类型
      },
      roleTypeOptions: [ // 下拉列表选项
        { label: "管理员", value: "admin" },
        { label: "普通用户", value: "pro" },
      ],
      id:"",
    };
  },
  computed: {
    ...mapGetters("permissions", ["getUsername"]),
    isAdmin() {
      return this.getUsername === 'admin';
    }
  },
  //生命周期函数
  mounted() {
    this.fetchData(); // 调用方法获取数据
  },
  //调用方法
  methods: {
    async userRoleupdateget() {
      try {
        const userName = this.editForm.userName; // 单独传递 userName
        const roleType = this.editForm.roleType; // 单独传递 roleType
        console.log("提交编辑数据:", { userName, roleType,userName });

        const response = await userRoleupdategetList({ roleType, userName}); // 分开传递参数
        this.id = response.data
        console.log("接口响应:", response);
        this.$message.success("数据更新成功");
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("数据更新失败，请稍后再试");
      }
    },
    openEditDialog(row, index) {
      this.editForm.userName = row.name; // 将当前行的 name 赋值到 userName
      this.editForm.roleType = row.type; // 将当前行的 type 赋值到 roleType
      console.log("当前行下标:", index); // 打印当前行的下标
      this.editDialogVisible = true; // 打开编辑弹出层
      this.userRoleupdateget(); // 点击编辑按钮时执行 userRoleupdateget
    },
    async submitEdit() {
      try {
        const roleType = String(this.editForm.roleType).trim(); // 确保 roleType 为非空字符串
        const userRoleId = Number(this.id); // 确保 userRoleId 为数字
        const userName = String(this.editForm.userName).trim(); // 确保 userName 为非空字符串

        // 参数检查
        if (!roleType || isNaN(userRoleId) || !userName) {
          this.$message.error("角色类型、ID 或用户名不能为空");
          console.error("提交失败: 参数缺失或格式错误", { roleType, userRoleId, userName });
          return;
        }

        const payload = { roleType, userRoleId, userName };
        console.log("提交编辑数据:", payload);

        const response = await RoleupdategetList({ roleType, userRoleId, userName} ); 
        this.fetchData(); // 刷新数据
        console.log("编辑成功:", response);
        this.$message.success("编辑成功");
        this.editDialogVisible = false; // 关闭弹出层
      } catch (error) {
        console.error("编辑失败:", error.response?.data || error);
        this.$message.error("编辑失败，请稍后再试");
      }
    },
    async fetchData() {
      try {
        // 获取用户列表
        const userResponse = await usergetToolList();
        if (userResponse && userResponse.data) {
          this.userList = userResponse.data; // 假设接口返回的数据在 data 属性中
          console.log("用户列表:", this.userList);

          // 提取用户列表中的 id
          const userIds = this.userList.map((item) => item.id).join(",");
          console.log("用户 ID 列表:", userIds);

          // 获取角色列表
          const roleResponse = await userRoleTargetList({ userIds }); // 传递用户 ID 列表
          if (roleResponse && roleResponse.data) {
            this.sysRole = roleResponse.data; // 假设接口返回的数据在 data 属性中
            console.log("角色列表:", this.sysRole);

            // 合并用户列表和角色列表
            this.mergeLists();

            // 在数据合并后调用 userRoleupdateget
            
          } else {
            console.error("角色列表接口返回数据为空或格式不正确");
          }
        } else {
          console.error("用户列表接口返回数据为空或格式不正确");
        }
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
    mergeLists() {
      // 假设 userList 和 sysRole 的长度相同，按索引合并
      this.mergedList = this.userList.map((user, index) => ({
        name: user.name,
        type: this.sysRole[index] || "无类型", // 如果 sysRole 中没有对应项，则显示 "无类型"
        index:index++
      }));
      console.log("合并后的列表:", this.mergedList);
    },
  },
};
</script>
<!-- css样式 -->
<style scoped>
.center-table{
  border-radius: 10px;
}
.center-table .el-table__cell {
  text-align: center; /* 确保表格内容和表头文字都居中 */
}
.dialog-footer {
  text-align: right;
}
::v-deep .el-dialog__header {
  background-color: #2e2e2e !important; /* 黑色背景 */
}
::v-deep .el-dialog__header .el-dialog__title {
  color: #fff !important; /* 白色字体 */
}
::v-deep .el-dialog__body {
  background-color: #2e2e2e !important; /* 黑色背景 */
}
::v-deep .el-dialog__footer {
  background-color: #2e2e2e !important; /* 黑色背景 */
}
::v-deep .el-message-box .el-message-box__header {
  background-color: #2e2e2e !important; /* 黑色背景 */
}
::v-deep .el-dialog__body .el-form .el-form-item .el-form-item__label {
  color: #fff !important;
}
::v-deep .el-input .el-input__inner {
  background-color: #2e2e2e !important; /* 黑色背景 */
}
::v-deep .el-input__inner {
  color: #fff !important;
}
</style>
